<template>
    <div>
        <Shortcut></Shortcut>
        <Header></Header>
        <div class="goods">
        <div class="good">
            <!-- {{ goodsList }} -->
            <div>
                <img :src="goodsList.data.image">
            </div>
            <div class="good-content">
                <div class="desc">{{ goodsList.data.name }}</div>
                <div class="price">{{ goodsList.data.p_price }}</div>
                <div class="count">
                    <el-input-number v-model="num" :min="1" :max="10" @change="handleChange"></el-input-number>
                </div>
                <a href="#" class="add-cart" @click="addCartData(goodsList.data.sku_id,num,0)">加入购物车</a>
            </div>
        </div>
        <div class="comment">
            <Comment :skuId="route.params.sku_id"></Comment>
        </div>
        </div>
    </div>
</template>

<script setup>
    import Shortcut from '@/components/common/Shortcut.vue'
    import Header from '@/components/home/Header'
    import Comment from '@/components/GoodsDetail/Comment.vue'
    import { getGoodsDetail } from '@/network/goods'
    import { onMounted,ref,reactive } from 'vue'
    import { useRoute } from 'vue-router'
    import { addCartData } from '@/utils/goods'


    const route = useRoute()

    let skuId = ref(route.params.sku_id)

    let num = ref(1)

    let goodsList = reactive({
        data:{}
    })

    const getGoods = async (skuId) => {
        const result = await getGoodsDetail(skuId)
        goodsList.data = result
    }



    const handleChange = (value) => {
        num.value = value
    }

    onMounted(() => {
        getGoods(skuId.value)
    })
    

</script>

<style lang="less" scoped>
    .goods {
        width: var(--content-width);
        margin: 0 auto;
        .good {
            display: flex;
            img {
                width: 350px;
                height: 350px;
            }
            .good-content {
                margin-top: 70px;
                margin-left: 20px;
                width: 600px;
                .desc {
                    font-size: 16px;
                    color: #666;
                }
                .price {
                    margin-top: 10px;
                    font-size: 22px;
                    color:#e4393c;
                }
                .count {
                    margin-top: 10px;
                }
                .add-cart {
                    display: block;
                    width: 150px;
                    height: 45px;
                    text-align: center;
                    line-height: 45px;
                    background-color: #e4393c;
                    font-size: 18px;
                    color: white;
                    font-weight: 700;
                    margin-top: 10px;
                }
            }
        }

        .comment {
            margin-top: 20px;
        }
    }
</style>